import React, { memo, useEffect } from "react";
import { useDispatch } from "react-redux";

import { RankingLeft, RankingRight, RankingWrapper } from "./style";
import { getTopListAction } from "./store/actionCreators";
import TopRanking from "./c-cpages/top-ranking";
import RankingHeader from "./c-cpages/ranking-header";
import RankingList from "./c-cpages/ranking-list";
export default memo(function Ranking() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getTopListAction());
  }, [dispatch]);
  return (
    <RankingWrapper className="wrap-v2">
      <RankingLeft>
        <TopRanking />
      </RankingLeft>
      <RankingRight>
        <RankingHeader />
        <RankingList />
      </RankingRight>
    </RankingWrapper>
  );
});
